<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="userSearchKey" placeholder="输入用户名称或用户ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search"
                   @click="getAllUser((pageParam.currentPage * pageParam.pageSize) - pageParam.pageSize, pageParam.pageSize, userSearchKey)">
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-popover
          placement="right"
          width="400"
          trigger="click">
          <el-input v-model="hobbyInput" placeholder="请输入新增标签" auto-complete="off"
                    @keyup.enter.native="submitTag"></el-input>
          <el-button slot="reference" size="small" type="primary" icon="el-icon-plus">新增兴趣标签</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="userList" highlight-current-row border element-loading-text="拼命加载中"
              style="width: 100%;text-align: center">
      <el-table-column sortable prop="headerImg" label="用户头像" width="200" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.headerImg" style="width: 100px;height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column sortable prop="username" label="用户昵称" width="100">
      </el-table-column>
      <el-table-column sortable prop="email" label="用户邮箱" width="150">
      </el-table-column>
      <el-table-column sortable prop="musicHobby" label="标签" width="300">
        <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.musicHobby" :key="index" style="margin-left: 5px">{{item}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="vioNum" label="违规发言次数" width="150">
      </el-table-column>
      <el-table-column sortable prop="status" label="是否禁言">
        <template slot-scope="scope">
          <div v-if="scope.row.status===2">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="12">
              <el-button size="mini" @click="showUserCommentRecord(scope.row.id,scope.row.username)">用户发言记录</el-button>
            </el-col>
            <el-col :span="12">
              <el-button size="mini" @click="showUserDetail(scope.$index)">详情</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="12">
              <el-button size="mini" @click="showVioRecord(scope.row.id,scope.row.username)">违规发言记录</el-button>
            </el-col>
            <el-col :span="12">
              <el-button size="mini" type="danger" @click="updateUserStatus(scope.row.id,2,scope.$index)"
                         v-show="userList[scope.$index].status===1">禁言
              </el-button>
              <el-button size="mini" type="success" @click="updateUserStatus(scope.row.id,1,scope.$index)"
                         v-show="userList[scope.$index].status===2">解禁
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParam.currentPage"
      :page-sizes="[10, 50, 100, 500]"
      :page-size="pageParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.total">
    </el-pagination>
    <!--详情-->
    <el-dialog title="用户详情" :visible.sync="userInfoVisible" width="60%">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            用户ID
          </template>
          {{userList[userDialog].id}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            用户名
          </template>
          {{userList[userDialog].username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            邮箱
          </template>
          {{userList[userDialog].email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            性别
          </template>
          {{userList[userDialog].sex}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            兴趣标签
          </template>
          <el-tag v-for="(item,index) in userList[userDialog].musicHobby" :key="index" style="margin-left: 5px">
            {{item}}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            生日
          </template>
          {{userList[userDialog].birthday}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            注册时间
          </template>
          {{userList[userDialog].createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            个性签名
          </template>
          {{userList[userDialog].personalSignature}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            用户状态
          </template>
          {{userList[userDialog].status}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--用户发言情况详情-->
    <el-dialog :title="commentName+'发言详情'" :visible.sync="userCommentRecordVisible" width="60%">
      <!--列表-->
      <el-table size="small" :data="userCommentList" highlight-current-row border element-loading-text="拼命加载中"
                style="width: 100%;text-align: center">
        <el-table-column sortable prop="commentType" label="评论类型" width="100" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.commentType===0">歌曲评论</div>
            <div v-else>动态评论</div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="id" label="评论ID" width="100" align="center">
        </el-table-column>
        <el-table-column sortable prop="content" label="评论(动态)内容" width="400">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="createTime" label="评论时间" width="200" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-popconfirm
              style="margin-left: 10px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="是否删除该评论或动态"
              @confirm="deleteComment(scope.row.id,scope.row.userId,scope.row.username)"
            >
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--用户违规记录情况-->
    <el-dialog :title="commentName+'违规记录'" :visible.sync="userVioRecordVisible" width="60%">
      <div style="float: right">
        <span style="color: red">红色</span><span>:表示辱骂</span>&nbsp;
        <span style="color: blue">蓝色</span><span>:表示文字违规</span>&nbsp;
        <span style="color: #afaf00">黄色</span><span>:表示色情</span>&nbsp;
      </div>
      <!--列表-->
      <el-table size="small" :data="userVioRecordList" highlight-current-row border element-loading-text="拼命加载中"
                style="width: 100%;text-align: center">
        <el-table-column sortable prop="userId" label="用户ID" width="100" align="center">
        </el-table-column>
        <el-table-column sortable prop="username" label="用户名" width="100" align="center">
        </el-table-column>
        <el-table-column sortable prop="sensitiveContexts" label="违规发言" width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.sensitiveContexts"></div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="label" label="涉及违规范围" align="center">
        </el-table-column>
        <el-table-column sortable prop="rate" label="违规程度" width="100" align="center">
        </el-table-column>
        <el-table-column sortable prop="suggestion" label="建议" width="100" align="center">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "User",
    data() {
      return {
        userSearchKey: '',
        // 分页参数
        pageParam: {
          currentPage: 1,
          pageSize: 10,
          total: 1000
        },
        userList: [],
        userInfoVisible: false,
        userDialog: 0,
        //显示发言姓名
        commentName: '',
        userCommentRecordVisible: false,
        userCommentList: [],
        hobbyInput: '',
        userVioRecordList: [],
        userVioRecordVisible: false,
      }
    },
    created() {
      this.getAllUser((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, '');
    },
    methods: {
      //查找违规记录
      showVioRecord(userId,username) {
        this.commentName = username;
        this.userVioRecordVisible = true;
        this.$axios({
          method: 'post',
          url: '/musicControl/showUserCommentCheck/' + userId,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.userVioRecordList = res.data.data.info;
        })
      },
      //提交标签
      submitTag() {
        if (this.hobbyInput.split(" ").join("").length === 0) {
          this.$notify({
            title: '警告',
            message: '不能为空哦',
            type: 'warning'
          });
        } else {
          this.$axios({
            method: 'post',
            url: '/musicControl/addTab/' + this.hobbyInput,
            headers: {
              authentication: localStorage.getItem("adminToken")
            }
          }).then(res => {
            if (res.data.msgCode === '200') {
              this.$notify({
                title: '成功',
                message: '增加成功',
                type: 'success'
              });
              this.hobbyInput = '';
            } else {
              this.$notify({
                title: '失败',
                message: '增加失败',
                type: 'error'
              });
            }
          })
        }
      },
      //禁言
      updateUserStatus(userId, status, index) {
        this.$axios({
          method: 'post',
          url: '/musicControl/updateUserStatus/' + userId + '/' + status,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        });
        this.userList[index].status = status;
      },
      //删除评论
      deleteComment(id, userId, username) {
        this.$axios({
          method: 'post',
          url: '/musicControl/deleteComment/' + id,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
          this.showUserCommentRecord(userId, username);
        })
      },
      //用户发言记录
      showUserCommentRecord(index, username) {
        this.commentName = username;
        this.userCommentRecordVisible = true;
        this.$axios({
          method: 'post',
          url: '/musicControl/getUserComment/' + index,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.userCommentList = res.data.data.info;
        })
      },
      //详情
      showUserDetail(index) {
        this.userInfoVisible = true;
        this.userDialog = index;
      },
      handleSizeChange(item) {
        this.pageParam.pageSize = item;
        this.getAllUser((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.userSearchKey)
      },
      //页数改变时
      handleCurrentChange(item) {
        this.pageParam.currentPage = item;
        this.getAllUser((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.userSearchKey)
      },
      //查找用户
      getAllUser(start, size, searchKey) {
        this.$axios({
          method: 'post',
          url: '/musicControl/getAllUser/' + start + "/" + size,
          data: {
            userSearchKey: searchKey,
          },
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.pageParam.total = res.data.data.total;
          if (this.pageParam.total === 0) {
            this.userList = [{username: '未找到该用户'}]
          } else {
            this.userList = res.data.data.info;
          }
        })
      },
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
